<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>测试动画</title>

        <style type="text/css">
            .container {
                width: 80vw;
                height: 20vh;
                border: 1px solid blue;
                margin: auto;
            }

            .circle {
                width: 20%;
                height: 100%;
                background: #dfdfdf;
                border-radius: 50%;
                /* 引用已经定义好的动画 */
                animation-name: change;
                /* 设置动画持续时间 */
                animation-duration: 3s;
                /* 设置动画的播放次数 */
                animation-iteration-count: 3;
                /* 设置动画播放速度曲线(三次贝塞尔曲线) */
                animation-timing-function: linear;
                /* 设置动画延迟时间 */
                animation-delay: 1000ms;
                /* 设置动画方向 */
                animation-direction: alternate;
                /* 设置动画状态 */
                animation-play-state: running;
                /* 规定当动画不播放时使用的样式 */
                animation-fill-mode: both;
            }

            .container:hover .circle {
                animation-play-state: paused;
            }

            @keyframes change {
                from {
                    background: #ff0;
                }
                to {
                    background: purple;
                    margin-left: 80%;
                }
            }
        </style>
    </head>

    <body>

        <div class="container">
            <div class="circle"></div>
        </div>

        <button class="paused">暂停</button>
        <button class="running">继续</button>

        <script type="text/javascript">
            // 选择页面上匹配指定选择器的首个元素
            var btn = document.querySelector( '.paused' );
            // 指定事件类型(事件名称)
            var type = 'click';
            // 定义事件监听器
            function listener(){
                // 命中被控制的元素 ( 选择页面上匹配指定选择器的首个元素 )
                var circle = document.querySelector( '.circle' );
                circle.style.animationPlayState = 'paused';
            }
            // 指定是否在事件捕获阶段处理事件
            var capture = false; // false表示不在事件捕获阶段处理
            btn.addEventListener( type, listener, capture );

            // 选择页面上匹配指定选择器的首个元素
            var btn2 = document.querySelector( '.running' );
            // 定义事件监听器
            function listener2(){
                // 命中被控制的元素 ( 选择页面上匹配指定选择器的首个元素 )
                var circle = document.querySelector( '.circle' );
                circle.style.animationPlayState = 'running';
            }
            btn2.addEventListener( type, listener2, capture );
        </script>
        
    </body>
</html>